<template>
  <div>
    <h1>学习mutations</h1>
    <p>{{userInfo.name}}今年{{userInfo.age}}</p>
    <button @click="setAddAge">修改年龄为20岁</button>
    <button @click="setAge(40)">修改年龄为40岁</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  computed: {
    ...mapState(["userInfo"])
  },
  methods: {
    setAddAge() {
      // 调用mutations里的修改年龄的函数
      this.setAge(20);
    },
    ...mapMutations(["setAge"]),
    // 给函数重命名
    ...mapMutations({ setAges: "setAge" })
  }
};
</script>

<style lang="scss" scoped>
</style>